<template>
  <div class="share">
    <div class="share-header">
      <img class="shareLogo" src="@/assets/img/shareLogo.png" alt=""/>
    </div>
    <div class="share-body">
      <img src="@/assets/img/shareBgc.jpg" alt="" class="shareBgc"/>
      <p class="share-title">
        {{ $t('message.lang49') }}
        <br/>
        {{ $t('message.lang50') }}
      </p>
      <span class="share-prompt">{{ $t('message.lang51') }}</span>
      <div class="inputArea">
        <input maxlength="4" type="text" v-model="shareCode" class="passwordInput" :placeholder="$t('message.lang52')"/>
        <div class="goShare" @click="goShare">
          <img src="@/assets/img/right-arrow.png" alt=""/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {SystemMangeAPI} from '@/api/SystemMange';

export default {
  data() {
    return {
      data: {
        shareCode: '',
        key: '',
      },
    };
  },
  created() {
    const {id} = this.$route.params;
    if (id) {
      this.key = id;
    }
  },
  methods: {
    goShare() {
      if (!this.shareCode) {
        this.$message({
          message: this.$t('message.lang53'),
          type: 'warning',
        });
        return;
      }
      const data = {key: this.key, password: this.shareCode};
      SystemMangeAPI.getShareAPI(data).then(({code, data}) => {
        console.log(data, 'data');
        if (code === 0) {
          if (data.resouse) {
            this.$router.push({path: `/shareTab/${data.name}`, query: data.resouse});
          } else {
            this.$router.push({path: `/share1/${data.ID}/${data.name}`, query: [...data.files]});
          }
        }
      });
    },
  },
};
</script>
<style>
.share {
  color: #fff;
}

.share-header {
  width: 100%;
  height: 60px;
  border-bottom: 1px solid #30323b;
  box-sizing: border-box;
}

.shareLogo {
  height: 50%;
  margin-left: 10px;
  margin-top: 10px;
  display: none;
}

.share-body {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

.shareBgc {
  width: 72%;
  border-radius: 8%;
  margin-top: 20%;
}

.share-title {
  font-size: 24px;
  text-align: center;
  margin-top: 30px;
  letter-spacing: 1px;
  line-height: 36px;
}

.share-prompt {
  margin-top: 8px;
  font-size: 18px;
  line-height: 26px;
  font-weight: 400;
  text-align: center;
  color: #9094a6;
}

.inputArea {
  width: 100%;
  position: relative;
  margin-top: 30%;
  display: flex;
  justify-content: center;
}

.passwordInput {
  width: 55%;
  height: 40px;
  outline: none;
  border: none;
  background: #20222b;
  border-radius: 64px;
  border: none;
  padding-left: 20px;
  font-size: 16px;
  font-weight: 400;
  color: #fff;
}

.goShare {
  display: flex;
  justify-content: center;
  align-items: center;
  position: absolute;
  top: 50%;
  right: 22.5%;
  border-radius: 50%;
  transform: translateY(-50%);
  width: 35px;
  height: 35px;
  background-color: #3468fe;
}

.goShare img {
  width: 80%;
}
</style>
